<!-- 政策评论 -->
<template>
    <div class="omments">
        <el-card>
            <el-button type="danger" :disabled="isDisabled" @click="deletes">批量删除</el-button>

            <!-- 表格 -->
            <div class="table">
                <el-table ref="multipleTableRef" :data="tableData" style="width: 100%;" max-height="460px"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" />
                    <el-table-column label="序号" type="index" width="100px" align="center">
                    </el-table-column>
                    <el-table-column prop="fromUserName" label="评论用户" width="120px" show-overflow-tooltip />
                    <el-table-column prop="content" label="评论内容" width="350px" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="title" label="评论政策" width="250px" show-overflow-tooltip />
                    <el-table-column prop="createdDt" label="评论时间" width="180px" />
                    <el-table-column label="操作" align="center" width="70px">
                        <template #default="scope">
                            <el-popconfirm title="您确定删除这条评论吗?" @confirm="handleDelete(scope.row)" icon="Delete"
                                icon-color="red" width="200px">
                                <template #reference>
                                    <el-button size="small" type="danger" icon="Delete"></el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                <!-- 分页器 -->
                <Pagination :paginationData="paginationData" @getInfo="getCommentsInfo"></Pagination>
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import Pagination from '../../components/pagination/index.vue'
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
// 引入全局事件总线
import { reqDeleteComment, reqDeletesComments, reqGetCommentInfo } from '../../api/info/comments/index'
import type { AllComments, commentData, CommentsResponseData } from '../../api/info/comments/type'

// 表格数据
let tableData = ref<AllComments>([])
// 存储接口返回的分页器数据
let paginationData = ref({})
let isDisabled = ref<Boolean>(true)
// 存储批量删除的评论的id
let deletesIdsArr: Array<number> = []
onMounted(() => {
    getCommentsInfo()
})
//获取全部 订单 信息
const getCommentsInfo = async (currentpage = 1, pagesize = 10) => {
    let data: commentData = {
        pageSize: pagesize,
        currentPage: currentpage
    }

    let result: CommentsResponseData = await reqGetCommentInfo(data)
    if (result.code == 20000) {
        tableData.value = result.data.list
        paginationData.value = result.data
    }
}

// 多选 
const handleSelectionChange = (selection: any) => {
    deletesIdsArr = selection.map((item: { id: number; }) => item.id)
    if (deletesIdsArr.length > 0) {
        isDisabled.value = false
    }
}
// 批量删除
const deletes = async () => {
    // reqDeletesComments
    let result: any = await reqDeletesComments(deletesIdsArr)
    if (result.code == 20000) {
        // 重新获取 订单 信息
        getCommentsInfo(paginationData.value?.currentPage)
        ElMessage({
            type: 'success',
            message: '批量删除成功'
        })
    } else {
        ElMessage({
            type: 'error',
            message: '批量删除失败'
        })
    }
}

// 气泡确认框 确认按钮回调 发货
const handleDelete = async (row: Comment) => {
    let result: any = await reqDeleteComment(row.id)
    if (result.code == 20000) {
        // 重新获取 订单 信息
        getCommentsInfo(paginationData.value?.currentPage)
        ElMessage({
            type: 'success',
            message: '评论删除成功'
        })
    } else {
        ElMessage({
            type: 'error',
            message: '评论删除失败'
        })
    }

}
</script>

<style lang="scss" scoped>
.table {
    margin: 20px 0;

    .el-table {
        font-size: 13px !important;
    }
}

.pagination {
    margin-top: 20px;
}
</style>